import React, { Component } from 'react'
// 受控组件
//   表单的value值受state数据的控制，配合change事件修改state的值，value的值就会自动跟着改变

// 非受控组件
//   就是DOM的那种处理方式
export default class App extends Component {
  state = {
    userName: '吴大勋',
    note: '',
    lesson: 1
  }
  render() {
    return (
      <div>
        <input type="text" value={ this.state.userName } onChange = { (event) => {
          this.setState({
            userName: event.target.value
          })
        }}/>{ this.state.userName} <br />
        <textarea value={ this.state.note } onChange = { (event) => {
          this.setState({
            note: event.target.value
          })
        }}></textarea>{ this.state.note}<br />
        <select value={ this.state.lesson } onChange = { (event) => {
          this.setState({
            lesson: event.target.value
          })
        }}>
          <option value={1}>1阶段</option>  
          <option value={2}>2阶段</option>  
          <option value={3}>3阶段</option>  
        </select>{ this.state.lesson }<br />
      </div>
    )
  }
}
